/**
 * 图片懒加载
 * @author  yogurt_ly
 * @todo 优化图片加载项
 * fixed
 */

function lazyloadFn() {
  //  1 监控网页滚动
  //  2 事件处理函数中-获取当前总可见内容高度=网页可见视口高度+滚动条滚动高度默认0
  var totalShowHeight =
    (window.innerHeight || document.documentElement.clientHeight) + //兼容IE
    (document.body.scrollTop || document.documentElement.scrollTop); //兼容doctpye
  //  3 事件处理函数中-获取所有图片
  var imgObj = document.querySelectorAll("img");
  //  4 事件处理函数中-遍历获取每个图片到可见视口左上角的距离
  imgObj.forEach(function(item, i) {
    var currentImgHeight = item.offsetTop;
    //  5 事件处理函数中-循环体内判断   【当前可见内容高度】>【当前图片到可见视口左上角的距离】
    if (totalShowHeight > currentImgHeight) {
      //不成立 不管
      //成立 修改src地址 （注：因为src地址修改，浏览器重新加载）
      item.src = item.getAttribute("data-original");
      //注：src是w3c规定的属性直接用，data-original自定义不能直接使用
    }
    /*eg：
    有5个图片，到网页左上角可见视口高度分别是【0，10px，15px，20px，100px】
    然后当前可见视口总高度：默认宽10px+滚动条30px
    
    */
  });
}
//首次调用
lazyloadFn();
//后续调用
window.onscroll = lazyloadFn;
